<template>
  <div class="data-list-container">
    <div class="list-title">数据列表</div>
    <div class="list-content">
      <div style="width: 400px">
        <dv-datalist-decoration :modules="dataList" :width="width"/>
      </div>
      <!--      <div class="upload-btn-container">-->
      <!--        <el-input v-model="dataname" placeholder="请输入内容" style="width: 170px"></el-input>-->
      <!--        <label class="el-icon-plus" for="upload-input" style="margin-left: 5px;"></label>-->
      <!--        <input type="file" id="upload-input" ref="uploadInput" @change="handleUpload">-->
      <!--      </div>-->
      <!--      <div style="margin-left: 150px;margin-top: 40px">-->
      <!--        <el-button type="primary" @click="submitForm()">提交数据</el-button>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import dvDatalistDecoration from "_c/dv-datalist-decoration";
import dvInput from "_c/dv-input";
import {getFileData} from "@/api/data";

export default {
  components: {
    dvDatalistDecoration,
    dvInput
  },
  data() {
    return {
      dataList: [],
      width: '350px',// 数据列表,
      file: null,
      dataname: ''
    }
  },
  mounted() {
    this.getData()
    this.$bus.$on('reloadData', (data) => {
      this.dataList = data
    })
    this.$bus.$on('getReloadData', (data) => {
      this.dataList = data
    })
  },
  methods: {
    getData() {
      //获取到数据列表的数据
      //todo 获取到文件数据
      getFileData().then(res => {
        this.dataList = res.data.msg
      })
    },
  }
}
</script>

<style scoped>
.data-list-container {
  margin: 50px auto 0;
  width: 350px;
  height: 400px;
  /*margin: auto;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*background-color: #002f6c;*/
  border-radius: 8px;
  /*box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);*/
}

.list-title {
  font-size: 24px;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 20px;
}

.list-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-content li {
  padding: 12px 24px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.list-content li.active {
  border: 2px solid #fff;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.3);
}

.list-content li:hover {
  border: 2px solid #fff;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
}

.upload-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.upload-btn {
  padding: 12px 24px;
  border-radius: 4px;
  background-color: #3a8cff;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background-color: #0050a5;
}

/* 新加代码 */
.upload-btn-container input[type="file"] {
  display: none;
}

.upload-btn-container label {
  padding: 10px 30px;
  border-radius: 5px;
  background-color: rgba(58, 140, 255, 0.8);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-btn-container label:hover {
  background-color: rgba(58, 140, 255, 0.6);
}

.list-content .new-data {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 18px;
  color: #fff;
  border: 2px solid #3a8cff;
  border-radius: 5px;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.list-content .new-data:hover {
  opacity: 1;
}


</style>
<style>
.el-table--border::after, .el-table--group::after, .el-table::before {
  background-color: transparent;
}

.upload-btn-container .el-input__inner {
  border: 2px solid #00b3ff;
  border-radius: 5px;
  background-color: #0a1c3b;
  font-size: 16px;
}
</style>
